<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>取消定时器</button>
    <!-- <img
      src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/baike/s=220/sign=86ee1a58f703918fd3d13ac8613c264b/d439b6003af33a870c994da2c65c10385243b596.jpg"
      alt=""
    /> -->
    <p>0</p>
    <script>
    //   let img = document.querySelector("img");
      let btn = document.querySelector("button");
         let p=document.querySelector("p")
    //   btn.onclick = function () {
    //     clearTimeout(timer);
    //   };
    //   function fn() {
    //     img.style.display = "none";
    //   }
    //   timer = setTimeout(fn, 5000);

    let  timer2=  setInterval(function(){
             p.innerHTML=parseInt(p.innerHTML)+1;
       },1000)
       btn.onclick=function(){
           clearInterval(timer2)
       }
    </script>
  </body>
</html>
